<template>
  <div style="padding: 50px 0px;">
    <Input v-model="value" placeholder="Enter something..."
           style="width: 300px;" clearable show-word-limit
           prefix="ios-contact" suffix="ios-search"/>
    <br/>
    <Input search enter-button placeholder="Enter something..."/>
    <br/>
    <Input v-model="value" type="textarea" placeholder="Enter something..."/>
    <br/>
    <Input v-model="value" disabled placeholder="Enter something..."/>
    <br/>
    <i-input v-model="value">
      <span slot="prepend">http://</span>
      <span slot="append">.com</span>
    </i-input>
    <br/>
    <i-input v-model="value">
      <Select v-model="select3" slot="prepend" style="width: 80px">
        <Option value="day">Day</Option>
        <Option value="month">Month</Option>
      </Select>
      <Button slot="append" icon="ios-search"></Button>
    </i-input>
    <br/>
    <Radio v-model="single">Radio</Radio>
    <br/>
    <RadioGroup v-model="phone">
      <Radio label="apple">
        <Icon type="logo-apple"></Icon>
        <span>Apple</span>
      </Radio>
      <Radio label="android">
        <Icon type="logo-android"></Icon>
        <span>Android</span>
      </Radio>
      <Radio label="windows">
        <Icon type="logo-windows"></Icon>
        <span>Windows</span>
      </Radio>
    </RadioGroup>
    <br/>
    <Radio v-model="single" disabled>Radio</Radio>
    <br/>
    <RadioGroup v-model="phone" vertical>
      <Radio label="apple">
        <Icon type="social-apple"></Icon>
        <span>Apple</span>
      </Radio>
      <Radio label="android">
        <Icon type="social-android"></Icon>
        <span>Android</span>
      </Radio>
      <Radio label="windows">
        <Icon type="social-windows"></Icon>
        <span>Windows</span>
      </Radio>
    </RadioGroup>
    <br/>
    <RadioGroup v-model="button1" type="button">
      <Radio label="北京"></Radio>
      <Radio label="上海"></Radio>
      <Radio label="深圳"></Radio>
      <Radio label="杭州"></Radio>
      <Radio label="广西" disabled></Radio>
    </RadioGroup>
    <br/>
    <Checkbox v-model="single">Checkbox</Checkbox>
    <Checkbox v-model="single" disabled>Checkbox</Checkbox>
    <br/>
    <CheckboxGroup v-model="fruit">
      <Checkbox label="香蕉"></Checkbox>
      <Checkbox label="苹果"></Checkbox>
      <Checkbox label="西瓜"></Checkbox>
    </CheckboxGroup>
    <br/>
    <i-switch v-model="switch1"/>
    <i-switch v-model="switch1">
      <span slot="open">开</span>
      <span slot="close">关</span>
    </i-switch>
    <i-switch disabled/>
    <br/>
    <Select v-model="model1" style="width:200px" clearable filterable>
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <Select disabled style="width:200px">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <br/>
    <Select v-model="model7" style="width:200px">
      <OptionGroup label="Hot Cities">
        <Option v-for="item in cityList1" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </OptionGroup>
      <OptionGroup label="Other Cities">
        <Option v-for="item in cityList2" :value="item.value" :key="item.value">{{ item.label }}</Option>
      </OptionGroup>
    </Select>
    <br/>
    <Select v-model="model10" multiple style="width:260px" max-tag-count="2">
      <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
    </Select>
    <br/>
    <AutoComplete
        v-model="value2"
        @on-search="handleSearch2"
        placeholder="input here"
        style="width:200px">
      <Option v-for="item in data2" :value="item" :key="item">{{ item }}</Option>
    </AutoComplete>
    <br/>
    <Slider v-model="value1" show-stops show-input></Slider>
    <br/>
    <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
    <DatePicker type="date" show-week-numbers placeholder="Select date" style="width: 200px"></DatePicker>
    <DatePicker type="daterange" placement="bottom-end" placeholder="Select date" style="width: 200px"></DatePicker>
    <DatePicker type="date" :options="options1" placeholder="Select date" style="width: 200px"></DatePicker>
    <DatePicker type="date" multiple placeholder="Select date" style="width: 300px"></DatePicker>
    <DatePicker type="datetime" placeholder="Select date and time" style="width: 200px"></DatePicker>
    <br/>
    <TimePicker type="time" placeholder="Select time" style="width: 168px"></TimePicker>
    <TimePicker type="timerange" placement="bottom-end" placeholder="Select time" style="width: 168px"></TimePicker>
    <TimePicker
        :disabled-hours="[1,5,10]"
        :disabled-minutes="[0,10,20]"
        placeholder="Select time"
        style="width: 168px"></TimePicker>
    <br/>
    <Cascader :data="data" v-model="value22"></Cascader>
    <br/>
    <Transfer
        :data="data3"
        :target-keys="targetKeys3"
        :list-style="listStyle"
        :render-format="render3"
        :operations="['To left','To right']"
        filterable
        @on-change="handleChange3">
      <div :style="{float: 'right', margin: '5px'}">
        <Button size="small" @click="reloadMockData">Refresh</Button>
      </div>
    </Transfer>
    <br/>
    <InputNumber :max="10" :min="1" v-model="value1"></InputNumber>
    <InputNumber :max="10" :min="1" v-model="value1" disabled></InputNumber>
    <br/>
    <Rate allow-half v-model="valueHalf" />
    <br/>
    <Upload action="//jsonplaceholder.typicode.com/posts/">
      <Button icon="ios-cloud-upload-outline">Upload files</Button>
    </Upload>
    <br/>
    <Upload
        multiple
        type="drag"
        action="//jsonplaceholder.typicode.com/posts/">
      <div style="padding: 20px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>Click or drag files here to upload</p>
      </div>
    </Upload>
    <br/>
    <ColorPicker size="small" v-model="backgrundColor" alpha recommend/>
    <br/>
    <br/>
    <br/>
    <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
      <FormItem label="Name" prop="name">
        <i-input v-model="formValidate.name" placeholder="Enter your name">
          <span slot="prepend">http://</span>
        </i-input>
      </FormItem>
      <FormItem label="E-mail" prop="mail">
        <i-input v-model="formValidate.mail" placeholder="Enter your e-mail"></i-input>
      </FormItem>
      <FormItem label="City" prop="city">
        <Select v-model="formValidate.city" placeholder="Select your city">
          <Option value="beijing">New York</Option>
          <Option value="shanghai">London</Option>
          <Option value="shenzhen">Sydney</Option>
        </Select>
      </FormItem>
      <FormItem label="Date">
        <Row>
          <i-col span="11">
            <FormItem prop="date">
              <DatePicker type="date" placeholder="Select date" v-model="formValidate.date"></DatePicker>
            </FormItem>
          </i-col>
          <i-col span="2" style="text-align: center">-</i-col>
          <i-col span="11">
            <FormItem prop="time">
              <TimePicker type="time" placeholder="Select time" v-model="formValidate.time"></TimePicker>
            </FormItem>
          </i-col>
        </Row>
      </FormItem>
      <FormItem label="Gender" prop="gender">
        <RadioGroup v-model="formValidate.gender">
          <Radio label="male">Male</Radio>
          <Radio label="female">Female</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="Hobby" prop="interest">
        <CheckboxGroup v-model="formValidate.interest">
          <Checkbox label="Eat"></Checkbox>
          <Checkbox label="Sleep"></Checkbox>
          <Checkbox label="Run"></Checkbox>
          <Checkbox label="Movie"></Checkbox>
        </CheckboxGroup>
      </FormItem>
      <FormItem label="Desc" prop="desc">
        <i-input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></i-input>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
        <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
      </FormItem>
    </Form>
    <br/>

  </div>
</template>

<script>
export default {
  name: "iview_form",
  props: {},
  data() {
    return {
      value: '',
      select3: 'day',
      single: false,
      phone: 'apple',
      button1: '北京',
      fruit: ['苹果'],
      switch1: false,
      cityList: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        },
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model1: '',
      cityList1: [
        {
          value: 'New York',
          label: 'New York'
        },
        {
          value: 'London',
          label: 'London'
        },
        {
          value: 'Sydney',
          label: 'Sydney'
        }
      ],
      cityList2: [
        {
          value: 'Ottawa',
          label: 'Ottawa'
        },
        {
          value: 'Paris',
          label: 'Paris'
        },
        {
          value: 'Canberra',
          label: 'Canberra'
        }
      ],
      model7: '',
      model10: [],
      value2: '',
      data2: [],
      value1: 25,
      options1: {
        shortcuts: [
          {
            text: 'Today',
            value() {
              return new Date();
            },
            onClick: (picker) => {
              this.$Message.info('Click today');
            }
          },
          {
            text: 'Yesterday',
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info('Click yesterday');
            }
          },
          {
            text: 'One week',
            value() {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              return date;
            },
            onClick: (picker) => {
              this.$Message.info('Click a week ago');
            }
          }
        ]
      },
      value22: [],
      data: [
        {
          value: 'beijing',
          label: '北京',
          children: [
            {
              value: 'gugong',
              label: '故宫'
            },
            {
              value: 'tiantan',
              label: '天坛'
            },
            {
              value: 'wangfujing',
              label: '王府井'
            }
          ]
        }, {
          value: 'jiangsu',
          label: '江苏',
          children: [
            {
              value: 'nanjing',
              label: '南京',
              children: [
                {
                  value: 'fuzimiao',
                  label: '夫子庙',
                }
              ]
            },
            {
              value: 'suzhou',
              label: '苏州',
              children: [
                {
                  value: 'zhuozhengyuan',
                  label: '拙政园',
                },
                {
                  value: 'shizilin',
                  label: '狮子林',
                }
              ]
            }
          ],
        }
      ],
      data3: this.getMockData(),
      targetKeys3: this.getTargetKeys(),
      listStyle: {
        width: '250px',
        height: '300px'
      },
      valueHalf: 2.5,
      backgrundColor: '',
      formValidate: {
        name: '',
        mail: '',
        city: '',
        gender: '',
        interest: [],
        date: '',
        time: '',
        desc: ''
      },
      ruleValidate: {
        name: [
          { required: true, message: 'The name cannot be empty', trigger: 'blur' }
        ],
        mail: [
          { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
          { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
        ],
        city: [
          { required: true, message: 'Please select the city', trigger: 'change' }
        ],
        gender: [
          { required: true, message: 'Please select gender', trigger: 'change' }
        ],
        interest: [
          { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
          { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
        ],
        date: [
          { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
        ],
        time: [
          { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
        ],
        desc: [
          { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
          { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {

  },
  methods: {
    handleSearch2(value) {
      this.data2 = !value || value.indexOf('@') >= 0 ? [] : [
        value + '@qq.com',
        value + '@sina.com',
        value + '@163.com'
      ];
    },
    getMockData () {
      let mockData = [];
      for (let i = 1; i <= 20; i++) {
        mockData.push({
          key: i.toString(),
          label: 'Content ' + i,
          description: 'The desc of content  ' + i,
          disabled: Math.random() * 3 < 1
        });
      }
      return mockData;
    },
    getTargetKeys () {
      return this.getMockData()
          .filter(() => Math.random() * 2 > 1)
          .map(item => item.key);
    },
    handleChange3 (newTargetKeys) {
      this.targetKeys3 = newTargetKeys;
    },
    render3 (item) {
      return item.label + ' - ' + item.description;
    },
    reloadMockData () {
      this.data3 = this.getMockData();
      this.targetKeys3 = this.getTargetKeys();
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('Success!');
        } else {
          this.$Message.error('Fail!');
        }
      })
    },
    handleReset (name) {
      this.$refs[name].resetFields();
    }
  },
  computed: {},
  watch: {}
}
</script>

<style scoped>

</style>